// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
body {
    min-width: 320px;
    width: 15rem;
    //750px 替换掉了fix的max width实现缩放的效果 因为rem最大是50所以这个在极限宽度的情况下等价于最大宽度是750
    margin: 0 auto;
    //居中
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #f2f2f2;
}
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
// search-content
@baseFont: 50;
//baseFont是用来计算本身苏宁写的rem是多少的，因为量的是pc端最大值，所以设置成为50px
.search-content {
    display: flex;//最开始两边固定死，中间放一个盒子，现在就是中间flex，两边固定宽高就可以了
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @baseFont;
    background-color:#FFC001;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        // 背景缩放
        background-size: 44rem / @baseFont 70rem / @baseFont;
    }
    .search {
        flex: 1;
        input {
            // 删除输入文字时的边框
            outline: none;
            // 宽度设置为100%，但是如果可以量rem还是可以量的
            width: 100%;
            border: 0;
            // 边框是要去掉的，input默认有边框
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;//圆角设置为高度的一半
            background-color:#FFF2CC;
            // 把搜索框移下来，上下就对了top
            margin-top: 12rem / @baseFont;
            // 文字不能太大，设置padding把文字往里面挤一下看起来比较舒服
            font-size: 25rem / @baseFont;
            padding-left: 55rem / @baseFont;
            color: #757575;
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        line-height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        text-align: center;
        color: #fff;

    }
}

// banner
// 本来是合适的但是不会缩放 == 直接×rem÷50 恒等变换
.banner {
    width: 750rem / @baseFont;
    height: 368rem / @baseFont;
    // 设置好盒子的宽高img直接填满盒子就可以了
    img {
        width: 100%;
        height: 100%;
    }
}
// ad
.ad {
    display: flex;
    // 直接flex然后三个1就完成了
    a {
        flex: 1;
        img {
            width: 100%;
        }
    }
}
// nav
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        // 没有用flex所以可以自动换行
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            // 上面有上一个图片留下来的空白，还有手动设置的这十个图片的margin 但是图片是行内元素不能左右居中对齐 margin 上 左右 下
            margin: 10rem / @baseFont auto 0; 
            // 于是转换成了block
            display: block;
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}
